🔵 왜 사용하나
5 - '3' //javscript에서는 가능 javascript 는 dynamic typing 기능이 있어서 자료형이 자유롭게 변형된다. 이건 유용하지만 프로젝트 사이즈가 커지게 되면 단점이 된다. 다른 사람들의 코드를 유지보수하거나 고쳐서 사용할 때 부작용이 발생한다.
typescript를 사용하는 이유는 바로 타입을 엄격하게 검사해주기 때문이다. 타입을 엄격하게 집어주기 때문에 에러가 날것같은 부분을 미리 말해준다. 때문에 기존 javascript의 추상적인 에러메시지 보다 쿠러리티도 좋다.
엄격한 검사 덕분에 따라오는 부가기능이다. 가끔 오타도 교정해주니 안쓸 이유가 없다.
🔵 설치
npm install -g typescript🔵 생성
typescript 의 파일명은 .ts이다.
node.js는 .ts파일을 인식할 수 없다. 때문에 .js로 파일을 변환시켜 주어야 하는데 그 때 필요한 것이 tsconfig.json 설정파일이다. tsconfig.json 파일 안에 적혀있는 규칙대로 index.js파일을 만들게 된다.
tsconfig.json
{
"compilerOptions":{
"target" : "es5", //문법 검사기준 esnext는 최
"module" : "commonjs", //모듈을 불러오는 기준
}
}🔵 변수
let name : string = "kim"
name = 123 //에러남이름이라는 변수에는 string 만 들어올 수 있다는 뜻이다. 타입에 많은 것들이 들어갈 수 있는데 대표적으로 string, number, boolean, null, undefined, bigint, [], {} 등이 들어갈 수 있다.
🔵 배열
let 이름 : string[] = ["kim","park"]이름이라는 배열에 string 말고 다른 타입이 들어가게 되면 에러가 발생한다.
let arr : string[] | number:
arr = ['a','b','c']
arr = 123타입을 복수로 지정할 수 있다. string[]과 number 모두 가능하다.
🔵 오브젝트
let 이름 : {name:string} = {name:"kim"}name이라는 속성 안에는 무조건 string만 들어가게 된다.
let 이름 : {name? : string} = {name : "kim}?의 뜻은 있을 수도 없을수도 있다는 이야기 이다. 즉 name속성이 없어도 에러가 발생하지 않는다. 일종의 옵션이라고 보면 된다.
🔵 타입 지정을 변수처럼 (type aliases)
//사용 1
type Name = string|number;
let 이름 : Name = 123;
이름 = "kim";
// 사용2
type Person = {
name : string,
age : number
}
let people : Person[]Name이 타입 string|number를 대신하게 된다. 이로서 복잡한 타입지정을 손쉽게 하고, 코드를 간결하게 적성할 수 있다. Name이라고 작성한것은 보통 대문자로 작성되기 때문이다.
🔵 함수에 타입 지정하기
function func(x : number) : number{
return x * 2
}
function add(a:number, b:number) {. //이미 return 값이 확정이기 때문에 따로 반환 타입을 지정하지 않아도 추론된다.
return a+b
}
function printOutPut(value : any) : void{ //아무값이나 들어가도 되기 때문에 any로 지었다. void는 생략될 수 있다.
console.log(value)
}매개변수 안에 있는 것은 매개변수 타입을 의미하고 () 오른쪽에 있는 것은 반환타입을 의미한다.
🔵 array에 쓸 수 있는 tuple 타입
type Member = [number, boolean]
let john:Member = [123,true]이 자료형의 첫번째는 무조건 number 두번째는 boolean 이라는 뜻이다.
🔵 객체를 배열로
let people:{name : string, age:number}[]🔵 타입추론
let text = "abcd"
text = 123 //이거안됨text변수에 초기값으로 string이 들어갔기 때문에 text타입을 string이라고 추론하게 된다. 즉 text:string이 생략되는것 ! 때문에 123인 number 타입이 들어가게되면 오류가 발생한다.
Generics
function insertAtBeginning(array: any[], value : any){
const newArray = [value,...array];
return newArray;
}
const demoArray=[1,2,3];
const updateArray = insertAtBeginning(demoArray, -1); //[-1,1,2,3]any는 말그대로 어떤 값이든 들어올 수 있다. 예시에서는 number를 넣었지만 string도 가능하다.
function insetAtBeginning<T>(array : T[], value:T){
const newArray = [value,...array];
return newArray;
}
const stringArray = insertAtBeginning<string>(['a','b','c','d'])
const PersonArray = insertAtBeginning<Person[]>([{name:'kim', age:20},{name:'park',age:30}])제네릭을 적용하므로써 array와 value의 타입이 가타야 한다는 것을 함수에게 알려줄 수 있다. 이제 자동으로 반환되는 newArray가 number[] 이라는 자료형이라는 것을 알게된다.
느낀점
사용하지 않는곳을 찾아보기 어려울 정도로 많이 사용하고 있기 때문에 꼭 써보고 싶었는데, 적응 하는데에도 불편하지 않았고 무엇보다 바로바로 에러를 체크할 수 있어서 좋았다. 에러를 미연에 방지 할 수 있었고, 러닝커브도 높지 않아서 좋았다!
