타입스크립트(Typescript)?
자바스크립트는 타입이 없는 동적 프로그래밍 언어로 자바스크립 변수는 문자열, 숫자, 불린 등 여러 타입을 가질 수 있다. 즉, 자바스크립트는 타입이 엄격하지 않다. 변수나 상수를 만들면 처음에 문자를 넣었다가 나중에 숫자를 넣는 등 자유롭게 변환이 가능하기 때문이다.
동적 프로그래밍 언어는 약한 타입 언어라고 표현할 수 있는데 비교적 유연하게 개발할 수 있는 환경을 제공하는 한편 런타임 환경에서 에러가 발생할 수 있는 단점을 가진다.
여기서 타입스크립트의 역할은 코드에 목적을 명시하고 목적에 맞지 않는 타입의 변수나 함수들에서 에러를 발생시켜 버그를 사전에 제거한다.
타입스크립트는 자바스크립트와 100% 호환되어 프론트엔드 또는 백엔드 어디든 자바스크립트를 사용할 수 있는 곳이라면 타입스크립트도 쓸 수 있다.
타입스크립트는 앱과 웹을 구현하는 자바스크립트와 동일한 용도로 사용 가능하며 서버 단에서 개발이 이루어지는 복잡한 대형 프로젝트에서도 많이 사용한다.
Q. 브라우저는 html, css, javascript만 읽을 수 있는다 typescript는 어떻게 읽을까?
: 자바스크립트로 변경되어 실행된다.
타입스크립트의 기능
- 크로스 플랫폼 지원: 자바스크립트가 실행되는 모든 플랫폼에서 사용 가능
- 객체 지향 언어
- 정적타입: 정적타입을 사용하기 때문에 코드를 입력하는 동안에 오류를 체크할 수 있다. (에디터, 플러그인 사용)
- DOM 제어: 자바스크립트와 같이 DOM을 제어해 요소를 추가하거나 삭제할 수 있다.
- ES6 이상의 최신 자바스크립트 문법을 손쉽게 지원한다.
타입스크립트 파일 확장자
자바스크립트가 .js 확장자를 가진 파일로 작성되는 것처럼 타입스크립트는 단순히 Javascript만 있는 파일이라면 .ts 확장자로 변경하고, Javascript 에서 JSX를 return 하는 컴포넌트들은 .tsx로 변경한다.
BoardWrite.container.tsx // JSX 를 return 하는 컴포넌트
BoardWrite.queries.ts // 자바스크립트만 사용하는 컴포넌트타입스트립트 설치 및 세팅
npm install typescript --save-dev
1) 위의 내용을 터미널에 복사하고 설치가 완료되었다면 typescript 설정파일(tsconfig.json)을 만들어 준다.
2) 현재 상태에서 yarn dev 명령을 실행하게 되면, nextjs가 typescript의 설정 파일인 tsconfig.json을 감지하고, tsconfig.json에 기본 설정을 자동으로 채워준다.
3) tsconfig파일에서 조금 더 엄격한 타입스트립트를 사용하기 위해 strict을 true로 바꿔준다.
타입스크립트 기본 문법
기본타입
- beeloen
- number
- string
- any
- void
- null
- undefined
- never
- object
- array
- turple
- enum
변수 타입 설정
let aaa:string = "안녕하세요"
aaa = 123 (x)
// 타입스크립트에서는 변수의 자료형을 지정해주기 때문에 위와같이 재할당이 불가능하다.
let aaa:string = "안녕하세요"
let bbb:number = 123
// 위와 같이 변수 타입을 지정해주면 된다.
배열과 객체 타입 설정
/* 배열타입 */
// 문자열만 있는 배열
let aaa:string[] = ["사과", "바나나", "딸기"]
// 배열에 문자열과 숫자열을 같이 넣고 싶을 때
let bbb:(strubg | number)[] = [1,2,3,"딸기","바나나"]
// 모두 숫자이거나 모두 문자인 배열
let ccc:sting[] | number[] = ["딸기", "바나나"]
ccc: [1,2,3]
/* 객체타입 */
// interface를 이용해서 만든다.
Interface IProfile{
name:string;
age:number;
}
let profile:IProfile = {name:"철수", age:13}
//age의 타입이 문자열이거나 숫자열일 때
interface Ipropfile{
name : string
age : string | number
school : string
}
const profile:Ipropfile = {
name : "철수"
age : 13 or "13살"
school : "다람쥐 초등학교"
}
타입스크립트에서 또는 그리고
또는: |
그리고: &
객체에서 해당 key에 value가 있으면 보내주고 싶다할 때
? 를 사용한다.
? 는 ‘있으면’ 이라는 뜻
타입명은 마음대로 만들 수 있는데 Interface의 I와 변수명 profile을 가져와 합쳐 만드는 것이 관례이다.
'IProfile'
위와 같이 타입스크립트를 이용해 각 변수에 타입을 지정하고 타입에 맞지 않는 값을 할당시 에러가 난다.
출처 및 참고
https://www.samsungsds.com/kr/insights/TypeScript.html
https://heropy.blog/2020/01/27/typescript/
