[TS] 기본 문법 타입 정리

TypeScript 문법을 정리하려고 합니다!

 

TypeScript란?

•  자바스크립트에 타입을 부여한 언어
• 자바스크립트의 단점을 보완해 만든 언어
• 정적타입언어

TypeScript  기본 타입

일반 변수, 매개변수, 객체 속성 등에 :TYPE과 같은 형태로 타입을 지정할 수 있습니다.

 

1. Number

//js
let num = 1;

//ts
let num:number = 1;

num = 2; 
num = '2'; //error

2. String

let car:string = 'bmw';

3. Boolean

let isDone:boolean = false;

4. Array

//일반적인 배열
let numList:number[] = [1,2,3];
let numList:Array<number> = [1,2,3];

let stringList : string[] = ['1','2','3'];
let stringList:Array<string> = ['1','2','3'];

numList = ['1','2','3']; // error
stringList = [1,2,3,];//error

//다중 타입 선언
let numStringList:(string|number)[] = ['a',1,'b'2];
let numStringList:Array<string|number> = ['a',1,'b'2];

//배열이 가지는 항목의 값이 어떤것일지 모를때
let someList:any[] = [0,'1',true,{},[]]

//인터페이스나 커스텀 타입 사용
interface User {
	name: stirng,
    age: number,
    isVaild: boolean
}

let userList:User[] = [
	{
      name: 'ju',
      age: 30,
      isVaild: true
    },
    {
      name: 'hyejin',
      age: 29,
      isVaild: false
    }
]

//readonly 타입 사용
let aList:readonly number[] = [1,2,3];
let bList:ReadonlyArray<number>=[1,2,3];

배열은 두가지 방법으로 사용할 수 있습니다.

• 배열 요소들을 나타내는 타입 요소 뒤에 [] 사용
• 제네릭 배열 타입 사용

유니언 타입(다중타입)의 문자열과 숫자를 동시에 가지는 배열도 선언할수 있습니다.

interface나 커스텀 타입을 사용할 수도 있습니다.

readonly로 읽기 전용 배열을 생성 할 수 있습니다.

 

5. Tuple

//일반적인 튜플 사용
let b:[string,number];

b = ["hello",10];
b = [10, "hello"]; //error

console.log(b[0].toLowerCase());
console.log(b[1].toLowerCase(1)); // error number에는 toLowerCase 없음

b[3] = 'hi'; // error 프로퍼티 3이 없음

//데이터를 개별 변수로 지정하지 않고, 단일 Tuple 타입으로 지정
let userId:number = 12;
let userName:string = 'hyejin';
let isValid:boolean = true;

let userA:[number,string,boolean] = [12,'hyejin',true];

//Tuple 타입의 2차원 배열 생성
let userA:[number,string,boolean][];
let userB:Array<[number,string,boolean]>;
userA = [[1,'hyejin',true],[2,'ju',false]];

// 값으로 타입을 대신할 수 있다.
let tupleA:[1,number];
tupleA = [1,2];
tupleA = [2,3]; //error

// push는 막을 수 없다.
let c:[string,number];
c = ['a',1];
c.push(3);
console.log(c); // ['a',1,3]
c.push(true); //string,number타입만 가능 하기 때문에 에러발생

//readonly를 사용해 읽기 전용 튜플 생성
let d:readonly[string,number] = ['a',1];
a[0] = 'b' // error

튜플 타입은 요소의 타입과 개수가 고정된 배열을 표현 할 수 있습니다.

• 데이터를 개별 변수로 지정하지 않고, 단일 Tuple 타입으로 지정해 사용할 수 있음
• 2차원 배열 생성 가능
• 값으로 타입을 대신할 수 있음
• readonly를 사용해 읽기 전용 튜플 생성 가능
• 정해진 타입의 고정된 길이 배열을 표현하지만 할당에 국한됨 -> push(), splice()등을 통해 값을 넣는 행위는 막을 수 없음
• 정해진 인덱스 외에 다른 인덱스에 있는 요소에 접근하면 오류 발생

 

6. Void 

function sayHello():void{
	console.log('hello');
}

함수에서 아무것도 반환하지 않을때 주로 사용합니다.

 

7. Never

function showError(){
	throw new Error();
}

function infloop(){
	while(true){
    	//do somthing...
    }
}

절대 발생할 수 없는 타입을 나타냅니다.

항상 오류를 발생시키거나, 절대 반환하지 않는 반환 타입으로 쓰입니다.

 

8. Enum

enum Color {
	Red,
    Orange,
    Yellow
}


let myColor:Color; // Red, Orange, Yellow만 입력 받을 수 있음.

myColor = Color.Red;

enum은 특정 값만 사용하도록 강제하고 싶은데 그 특정 값들의 공통점이 있는 경우 사용합니다.

• 기본적으로 0부터 시작하여 멤버들의 번호를 매김
• 수동으로 멤버의 값을 변경 할 수 있음
• 변경 할때에 숫자 뿐 아니라 문자열을 입력 할 수 도 있음
• 역방향 매핑을 지원 함(문자열 값으로 초기화 시 역방향 매핑 지원 x)

9. Null

let n:null = null;

10. undefined

let u:undefined = undefined;

11. Any

let notSure:any = 4;
notSure = "maybe a string instead";
notSure = false;

Any는 모든 타입을 의미

일반적인 자바스크립트 변수와 동일하게 어떤 타입의 값도 할당할 수 있습니다.

해당 타입을 추론할 수 없기 때문에 잠재 버그가 있어서 런타임 에러를 발생 시킬 수도 있기때문에 자주 사용하는 것을 피해야 합니다.