= JavaScript + Type문법
“JavaScript Superset” js 대용품 같은 언어다.
js 문법을 그대로 이용 가능한데, Type부분을 업그레이드한 js 업그레이드 버전이라고 생각하면 된다.
5 - '3' // 원래는 숫자 - 숫자만 가능하지만, js가 알아서 숫자로 바꿔줌
js는 ‘3’이라는 문자를 숫자로 바꿔서 계산해주지만, typeScript는 엄격히 이를 검사해준다.
TypeScript를 공부하려고 youtube에서 search했다가 비유가 웃기고 적절해서 캡처한 캡처본🤣
변수의 오른 쪽에 type을 지정해 변수의 type을 지정할 수 있다.
지정된 type과 다른 type의 값이 들어오면 아래 이미지와 같은 error가 발생한다.
변수 name의 type을 문자로 지정했기 때문에 name에는 무조건 문자만 들어올 수 있다.
💡Tip
Typescript는 기본적으로 export가 없는 파일을 legacy 취급을해서 error 표시를 하기 때문에
export{}로 아무것도 가져오지 않고 파일을 모듈로 만들어서 에러를 해결하였다.
그리고 브라우저는 js파일만 읽을 수 있기 때문에 ts파일을 js파일로 변환해야 사용 가능하다.
터미널에 tsc -w 입력하면 자동변환 됨
let name: string[] = ["lee", "hyejin"];
export {};
💡Tip
위와 같이 :를 이용하여 js 코드에 Type을 정의하는 방식을 “타입 표기(Type Annotation)”이라고 한다.
let name: { name: string } = { name: "kim" };
export {};
let name: { name?: string } = { name: "kim" };
export {};
let name: string | number = 123;
export {};
// string 타입을 사용할 때
const name: string = 'capt';
// 타입 별칭을 사용할 때
type MyName = string;
const name: MyName = 'capt'
함수에도 Type 지정이 가능하다. parameter에서 type 지정이 가능하다.
아래의 함수는 파라미터로 number, return 값으로 number로 들어와야 error가 발생하지 않는 엄격한 함수다.
첫번째 number는 parameter의 type. 2번째 number는 return의 type이다.
function name (x :number) :number{
return x * 2
}
name('123') //error 발생한다.
type Member = {
name:string
}
let john : Member = {name :123 } //error. 함수 john에는 문자형 값만 들어올 수 있다.
Tuple:
튜플은 배열의 길이가 고정되고 각 요소의 Type이 지정되어 있는 배열 형식을 의미한다.
만약 정의하지 않은 type, index로 접근할 경우 오류가 난다.
type Member = [number, boolean] // 첫번째는 number, 두번째는 boolean
let john:Member = [123,true]
let arr: [string, number] = ['hi', 10];
arr[1].concat('!'); // Error, 'number' does not have 'concat'
arr[5] = 'hello'; // Error, Property '5' does not exist on type '[string, number]'.
object에 type을 지정해야 할 속성이 너무 많으면 type 키워드로 변수에 담아 사용가능합니다.
특정 속성이 선택사항이면 물음표를 기입해서 사용하면 된다.
tyoe Member = { //type 지정해야할 속성이 너무 많으면, 이런식으로 객체의 type을 지정하는 것이 아니라
name : string,
age : string,
}
type Member = {
[key :string] : string, // [key :string] 모든 object속성들이, :string 전부 string type을 가져야한다.
// 즉 "글자로 된 모든 object속성의 type은 string"
}
let john : Member = {name :'kim', age: '28' }
type MyObject = {
name? : string, // 특정 속성이 선택사항이면 물음표를 기입해서 사용
age : number
}
let nick :MyObject = {
name : 'kim',
age : 50
}
✅ TypeScript를 사용 하는 이유
✅ TypeScript의 문법
이 말을 듣고 엄청 공감했다. eslint 같다니 어쩜 이렇게 찰떡 같은 비유를 하시는지…
역시 같이 공부하고 이해한 바에 대해서 얘기를 나누니까 더 이해가 잘 되고 지식이 2배가 되는 것 같아 즐거웠다.