타입스크립트 타입
타입스크립트에는 타입에는 number, string, boolean, null, undefined, object, array, enum의 타입이 있다.
number, string, boolean
자바스크립트와 타입스크립트에는 int, float, double 같은 형이 없고 다 number 형을 쓴다.
그리고 char형도 없다 한글자를 표현하든 여러 글자를 표현하든 다 string형으로 표현할 수 있다.
boolean형은 true와 false를 표현하는 타입이다.
let num: number = 123; // number타입 선언
let str: string = "문자열 입니다."; // string 타입 선언
let bool: boolean = true; // boolean 타입 선언
num = "str"; // number 타입에 string 타입을 넣으려고 하면 에러
str = 123; // 타입이 다른 값을 대입하려고 하면 에러
bool = "gggg";array
array 타입을 그냥
const array = [];로 설정하게 되면 any[]라고 된다. 아무 값이나 넣을 수 있는 배열이 된다.
any는 모든 타입의 슈퍼타입이며 모든 것을 포함 할 수 있기 때문에 좋은 타입이라고 생각하기 쉽지만 js랑 다른게 없게 된다. 그래서 any 타입은 정말 어떤 타입이 올지 알 수 없을 때가 아니면 사용을 최대한 지양해야한다.
배열 안에 어떤 값들이 들어갈지를 알면 그 타입을 지정해주면 된다.
const array: string[] = [];
const array1: number[] = [];
const array2: boolean[] = [];그리고 나서 string 배열이나 number 배열에 다른 타입의 값을 넣으려고 하면 에러가 난다.
array.push(1) // string[]에 number를 넣으려고해서 에러가 뜬다.해당 타입에 맞는 값을 넣어줘야한다.
const array: string[] = [];
const array1: number[] = [];
const array2: boolean[] = [];
array.push("1"); // string 값을 넣어주면 에러가 나지 않는다.그리고 나서 npx tsc를 하면 dist 폴더에 test.js 파일이 생성된다.
dist/test.js
"use strict";
var array = [];
var array1 = [];
var array2 = [];
array.push("1");이렇게 된다. 딱 보면 딱히 타입 체크라던지 제한 같은게 js에서 생기는 것은 아니다. 즉, ts는 개발 할 때 타입체크 및 IDE 지원을 도와주는 것이지 js 파일에 특별한 코드를 삽입 시켜줘서 타입체킹까지 해주는 것은 아니라는 것이다. 타입스크립트가 만능이 아니다. 타입스크립트는 타입체크를 해주는 것이지 논리적인 부분의 에러까지는 잡아내주지 못 한다. 즉 타입스크립트를 하더라도 코드를 잘 짜야하는 것은 똑같다.
tuple
튜플은 원소의 수와 각 원소의 타입이 정확히 지정된 배열이다.
튜플 타입 변수는 정확히 명시된 개수 만큼의 원소만을 가질 수 있다.
const tuple: [string, number] = ['문건우', 26, 4]; // 원소의 개수가 달라 에러가 난다.
let tuple1: [string, number] = ['문건우', 26]; // 에러가 안 남.
tuple1 = [123,"123"]; // 타입 순서가 맞지 않아 에러가 난다.다만 튜플 타입의 값을 Array 프로토타입의 메소드를 통해 조작하는 것은 금지되지 않는다는 점에 유의해야 한다.
const tuple: [string, number] = ['문건우', 26];
tuple.push(1); // 에러가 안 난다. 유의!!object
object형 또한 지원한다.
const obj: object = {
name: '문건우',
role: '학생',
}이렇게 하면 된다. 하지만 이렇게 했을 경우 object 안에는 name, role 속성이 없기 때문에 obj. 하고 ctrl + space를 했을 경우 key 값들이 나타나지 않는다. 그래서 제대로 타입 체킹이 되게 하려면 object 말고 정확한 키: 타입 값을 적어주는게 좋다.
const obj: {
name: string,
role: string
} = {
name: '문건우',
role: '학생',
}
이런식으로하면 객체안의 속성 체크가 제대로 이뤄지는 것을 알 수 있다. 훨씬 개발하기 편해지고 다음에 기억 안 날 때도 다시 체크하러 스크롤을 올리지 않아도 된다.
하지만 타입이 보기에 좋지 않다. 가독성도 떨어지고 뭔가 별로다...! 다음에 좀 더 예쁘게 적어볼 것이다.
너무 길어져서 enum과 함수에 대해서는 다음 시간에 적어야겠다!!
