🤔핫한 Typescript, 그 이유는?
타입 지정에 따른 개발 편의성과 javascript와의 상호 호환
동적 타입인 javascript가 런타임에 타입이 지정되지만 정적타입인 Typescript는 컴파일시 타입을 체크한다. 이는 예상지 못한 타입의 인수로 인한 오류를 개발자가 미리 체크할 수 있도록 도와준다. 인수가 어떤 타입인지 직관적으로 알아 함수의 코드를 분석할 필요없이 디버깅을 빠르게 수행할 수 있다. 무엇보다 Typescript는 javascript의 낮은 버전으로 컴파일이 되기 때문에 babel을 사용하지 않고도 넓은 호환성을 가진 코드를 가질 수 있다.
Typescript의 이점을 알았으니 기초부터 공부를 시작하자!
기초 1. 타입 지정
매개 변수, 객체 속성부터 함수의 반환값까지. 그 이외의 변수 등등에 타입을 지정.
1. 숫자 / 문자열 / 불리언 / 배열
- 배열은 두 가지 타입으로 선언 가능.
- 타입 지정은 특정 값으로도 지정이 가능.
// 숫자
let num: number = 2.14;
// 문자열
let str: string = 'Hello';
// 불리언
let bool: boolean = true;
// 문자열만 가지는 배열
let animals1: string[] = ['cat', 'dog'];
let animals2: Array<string> = ['cat', 'dog'];
// 특정한 값으로 지정
let unique: 'hi' = 'hi';- 배열은 항목이 한 가지 타입만 갖는 것이 아니기에 유니언으로 타입을 지정.
- 읽기 전용 배열도 생성이 가능. (readonly 사용)
// 유니언 타입
let arr1: (string | number)[] = ['cat', 1];
let arr2: Array<string | number> = ['cat', 1];
// 항목의 값을 단언할 수 없는 경우
let some: any[] = [0, 1, 'dog'];
// 읽기 전용
let book1: readonly string[] = ['Little prince', 'Algorithm'];
let boo2: ReadonlyArray<string> = ['Little prince', 'Algorithm'];2. 튜플(Tuple)
- 배열과 유사한 튜플(Tuple)타입이 있는데 정해진 타입으로 고정된 길이 갖는 배열을 표현.
- 자바스크립트에서는 지원하지 않는 타입.
- 튜플은 할당에 한에 고정된 길이 배열 표현.
push(),shift()등에 대한 행위는 막지 못하고 오류 체크 불가. - readonly 사용하여 읽기 전용 튜플 생성. (인덱스로 할당 불가)
let tuple: [string, boolean];
tuple = ['cat', true];
tuple = ['cat','dog']; // Type 'string' is not assignable to type 'boolean'.
// 튜플 배열
let list = [number, string][];
list = [[1, 'rose'], [2, 'lily']];
// 읽기 전용 튜플
let tuple: readonly [number, string];
tuple = [1, 'cat'];3. enum
- 열거형 데이터 타입.
- 숫자나 문자열 값 집합에 이름을 부여할 수 있는 타입을 enum이라고 함.
- enum은 기본적으로 0부터 시작하여 값이 1씩 증가되어 있다.
- 수동적으로 위의 값 변경 가능.
- 역방향 매핑 지원
- 문자열 값으로 초기화할 경우 역방향 매핑 불가.
enum Day {
Sun, // 0
Mon = 22,
Tue, // 23
Wed, // 24
Thu, // 25
Fri, // 26
Sat // 27
}
// 역방향 매핑
console.log(Day[0]) // Sun4. any
- any는 모든 타입을 의미.
- 어떤 타입값도 할당될 수 있음.
- 외부 라이브러리나 동적 콘텐츠를 사용할 경우 설정 가능.
- 변수 선언과 초기화시 값과 타입을 지정하지 않으면 암시적으로 any타입 지정.
- 타입시스템 장점을 유지하려면 지양해야함.
let some: any = 123;
some = 'str'
some = false;
some = null;5. unknown
- unknown은 알 수 없는 타입을 의미.
- any처럼 모든 타입의 값을 할당할 수 는 있지만 unknown을 다른 타입에 할당은 불가.
let some: any = 123;
let something: unknown = 'something';
let newSome: boolean = some;
let newSomething: number = something; // Type 'unknown' is not assignable to type 'number'.6. Object
- typeof 연산자가 object로 반환하는 모든 타입을 나타냄.
- 정확하게 타입 체커를 하려면 객체 속성들에 대해 개별적으로 타입 지정.
let obj: object = {};
let nullObj: object = null;
// 객체 속성 타입 지정
let animal1: {name: string, age: number} = {
name: 'kitty',
age: 20
}
// interface 사용
interface Animal {
name: string,
age: number
}
let animal2: Animal = {
name: 'Nabi',
age: 12
}7. null과 undefined
- 모든 타입의 하위 타입.
- tsconfing.json에서
"strickNullChecks" : true면 다음과 같이 작동 false인 경우 모든 데이터 타입은 null과 undefined 할당 가능.
let un: undefined = undefined;
let an: any = undefined;
let vo: void = undefined;
let unk: unknown = undefined;
let nu: null = null;
let nuAn: any = null;
let nuUnk: unknown = null;
let num: number = undefined; // Type 'undefined' is not assignable to type 'number'.8. void
- 함수에서 값을 반환하지 않는 경우 사용.
- 실제 반환되는 값은
undefined이다.
function addAnimal(animal: string): void {
console.log(`${animal}이 추가되었습니다.`)
}9. never
- 절대 발생하지 않을 값으로 일반적으로 함수의 리턴 타입으로 사용.
- 오류를 출력하거나 절대로 리턴값을 내보내지 않음을 의미하는 무한 루프에 빠지는 것과 같다.
- never 타입을 지정한 변수는 never 타입이 아니면 할당 불가.
// 오류 발생
function setError(msg: string): never {
throw new Error(msg)
}
// 무한 루프
funciton loop(): never {
while(1){ loop() }
}10. union과 intersection
- union : 2개 이상의 타입을 허용. '|'로 타입 구분
- interation: '&' 사용하여 2개 이상 타입 조합.
// union
let id: (string | number | null);
id = null;
id = 'hi';
id = 1;
// interaction
interface Hair {
style: string
}
interface Color {
color: string
}
const hairStyle: Hair & Color = {
style: 'Long',
color: 'blueBlack',
cut: '2cm' // Error
}11. 함수
- 매개 변수와 반환 값에 타입 지정.
- 반환 값같은 경우 매개 변수의 타입에 따라 타입이 추론 가능.
- 매개 변수의 타입을 지정하지 않으면 암시적으로 any가 지정.
function addAnimal(name: string, age: number): void {
console.log(`${name}은 ${age}살 입니다.`
}참고자료
https://yamoo9.gitbook.io/typescript/
https://chaeyoung2.tistory.com/62
웹 프론트엔드 개발자