타입스크립트란🤔
자바스크립트와 다르게 타입 시스템을 갖음
=> 프로그램이 실행되기 전에 모든 변수와 표현식의 타입을 확인하고 고정하는 방식
JS vs TS
| 특징 | JS | TS |
| 타입 시스템 | 동적 타입 | 정적 타입 |
| 컴파일 | 필요 없음 | js로 컴파일 필요 |
| 개발 경험 | 유연하고 빠르게 시작 가능 | 코드 완성, 타입 검사 등으로 향상된 개발 경험 |
| 프로젝트 규모 | 소규모 | 대규모 |
| 런타임 오류 | 런타임에 타입 오류 발견 가능 | 컴파일 타입 오류 발견 가능 |
| 학습 곡선 | 낮음 | 높음 |
| 도구 지원 | 광범위한 도구와 라이브러리 지원 | JS생태계의 모든 도구와 라이브러리 지원 |
| 브라우저 지원 | 모든 브라우저에서 기본적으로 지원 | 트랜스 파일 된 JS가 모든 브라우저에서 지원 |
타입선언
- 불리언 : boolean
let isBoolean: boolean;
let isDone: boolean = false;- 숫자 : number
let num: number;
let integer: number = 6;
let float: number = 3.14;
let hex: number = 0xf00d; // 61453
let binary: number = 0b1010; // 10
let octal: number = 0o744; // 484
let infinity: number = Infinity;
let nan: number = NaN;- 문자열 : string
let str: string;
let red: string = 'Red';
let green: string = 'Green';
let myColor: string = `My color is ${red}`;
let yourColor: string = 'Your color is ' + green;- 배열 : Array
let fruits: string[] = ["Apple", "Banana", "Mango"];
let fruits: Array<string> = ["Apple", "Banana", "Mango"];
let oneToSeven: number[] = [1, 2, 3, 4, 5, 6, 7];
let oneToSeven: Array<number> = [1, 2, 3, 4, 5, 6, 7];
let array: (string | number)[] = ["Apple", 1, 2, "Banana", "Mango", 3];
let array: Array<string | number> = ["Apple", 1, 2, "Banana", "Mango", 3];
let someArr: any[] = [0, 1, {}, [], "str", false];- 인터페이스 : interface
=> 객체의 구조를 정의하는 데 주로 사용
interface IUser {
name: string;
age: number;
isVaild: boolean;
}
let userArr: IUser[] = [
{
name: "Neo",
age: 10,
isVaild: true,
},
{
name: "Lewis",
age: 64,
isVaild: false,
},
{
name: "Evan",
age: 123,
isVaild: true,
},
];- 타입 별칭 : type
=> 객체, 유니언(union), 튜플(tuple) 등 다양한 타입을 정의
type User = {
name: string;
age: number;
isValid: boolean;
};
let userArr: User[] = [
{
name: "Neo",
age: 10,
isValid: true,
},
{
name: "Lewis",
age: 64,
isValid: false,
},
{
name: "Evan",
age: 123,
isValid: true,
},
];- Null, undefined
let undefin: undefined = undefined;
let nul: null = null;
let stringOrNull: string | null = null;
let numberOrUndefined: string | undefined = undefined;- any : 모든곳에 쓰임
let any: any = 123;
any = 'play game';
any = {};
any = null;
const arr: any[] = [1, true, 'typescript'];- void : return값이 없을때
function coding(msg: string): void {
console.log(`Happy ${msg}`);
}- 🌟 유니온 : |
=> 마치 자바스크립트의 OR 연산자와 같은 타입, 타입을 여러개 연결하는 방식
let union: (string | number);
union = 'Hello World';
union = 777;
union = false; // Error- 인터섹션 : &
=> 마치 자바스크립트의 && 연산자와 같은 타입, 두개이상의 타입을 조합하여 하나의 타입으로 합치는 방식
interface User {
name: string,
age: number
}
interface Validation {
isValid: boolean
}
const testCase2: User & Validation = {
name: 'jisu',
age: 30,
isValid: true
}- 함수 : function(){}
let myFunc: (arg1: number, arg2: number) => number;
myFunc = function(x, y) {
return x + y;
}
myFunc(1, 2); // 3
let noneFunc: () => void;
noneFunc = function () {
console.log('hihi');
};*이런타입도 있다~
- 읽기 전용 : readonly
let arrA: readonly number[] = [1, 2, 3, 4];
let arrB: ReadonlyArray<number> = [2, 4, 6, 8];- 튜플 : Tuple
=> 배열같이
let tuple: [string, number];
tuple = ['a', 1];
tuple = [1, 'a']; // Error
let userA: [number, string, boolean] = [1234, 'juyoung', true];
let usersA: [number, string, boolean][];
let usersB: Array<[number, string, boolean]>
usersA = [[1, 'chisus', true], [2, 'jisu', false]];
let tupleA: [1, number];
tupleA = [1, 2];
tupleA = [2, 3]; // Error
let a: readonly [string, number] = ['rest', 123];
a[0] = 'work'; // Error- 열거형 : enum
enum Week {
Sun,
Mon,
Tue,
Wed,
Thu,
Fri,
Sat
}
enum Color {
Red = 'red',
Green = 'green',
Blue = 'blue'
}- 객체 : object
let obj: object = {};
let arr: object = [];
let func: object = function () {};
let date: object = new Date();
interface Users {
name: string,
age: number
}
let userA: Users = {
name: 'juyoung',
age: 27
};- 알 수 없는 타입 : unknown
let u: unknown = 123;
let test1: number = u; // Error
let test2: number = u as number;
let test3: any = u;- Never
=>결코 발생하지 않는 값
function error(message: string): never {
throw new Error(message);
}
const never: [] = [];
never.push(3); // Error