[TypeScript] 기본 개념 정리
TypeScript
JavaScript의 대체 언어이다.
.ts 확장자를 사용하고 컴파일의 결과로 .js 파일을 출력한다. 최종적으로는 JavaScript 코드를 구동시키는 것
JavaScript와 달리 타입을 명시할 수 있어 코드 작성 시 에러를 줄여준다.
TypeScript의 장점
- 쉽게 오류 탐지
- 컴파일 시 정적 타입 체크
- 객체 지향 프로그래밍
- JavaScript와 100% 호환
- 특정 기능 및 파일에만 적용 가능
TypeScript 적용
JavaScript에서 타입명 선언 추가!
let tsString: string;
let tsNumber: number;
let tsVar: any;
let tsNumber: number[];
let boolArr: boolean[];
let obj1: { name: string } = { name: "이름" };
let obj2: { name?: string } = { name: "이름" };
이렇게 :타입명 선언만 해주면 된다.
배열인 경우에는 [] 추가
?붙이면 해당 값이 있을수도, 없을수도 있음
let tuple: [string, number];
tuple = ["tuple", 7];
let stringArr: Array<string>;
튜플이랑 Generic도 사용 가능하다.
function sum(num1: number, num2: number): number {
return num1 + num2;
}
function getSize<T>(arr: T[]) {
return arr.length;
}
function notReturn(): void {
console.log("리턴하지 않는 함수")
}
함수에서도 입력받는 인자값 및 리턴값의 타입을 선언 가능하다.
Generic을 사용해서 사용 시 타입을 결정할 수도 있음
리턴하지 않는 함수의 경우 void를 적어줘야하고 이 함수가 값을 리턴하는 경우 오류가 발생한다!
그리고 인터페이스를 사용해서 타입 선언을 공통적으로 묶어줄 수 있다!!
여기서부터는 자바스크립트가 아니라 자바랑 비슷해서 신기했다.
interface Multiply {
(num1: number, num2: number): number;
}
const mul: Multiply = function (x, y) {
return x * y;
}
interface User {
name: string;
age: number;
gender?: string;
}
interface Score {
[grade: number]: string;
}
let user: User & Score = {
name: "이름",
readonly age: 1,
1: 'A',
2: 'B'
}
// 배열로 원하는 타입 선언 묶어줄 수 있음
interface Member {
name: string;
age: number;
walk(): void;
}
class Mem1 implements Member {
name;
age;
constructor(name: string, age: number) {
this.name = name;
this.age = age;
}
walk() {
console.log("Walk");
}
}
객체, 함수, 클래스 등에 인터페이스 적용 가능
그리고 접근 제어자도 존재한다.
private, public, protected가 있고 접근 범위는 알고있던 바와 같음
private: 클래스 내에서만 접근
protected: 클래스 내, 상속받은 자식 클래스 내에서만 접근
public: 모든 곳에서 접근
abstract class Car {
color: string;
constructor(colot: string) {
this.color: color;
}
start() {
console.log("start");
}
abstract do(): void;
}
class myCar extends Car {
// 추상 클래스의 변수 및 함수 정의...
}
추상 클래스도 가능!!!
interface User {
id: number;
name: string;
age: number;
}
let admin: Partial<User> = {
id: 1,
name: "admin"
}
// interface의 모든 property가 없어도 됨
let member: Pick<User, "id" | "name"> = {
id: 2,
name: "mem"
}
// interface의 일부 property만 사용 가능
let user: Omit<User, "age"> = {
id: 3,
name: "user"
}
// interface의 특정 property만 제거 가능
Partial, Pick, Omit을 선언해 interface의 일부 property만 사용 가능하다
type Grade = 1 | 2 | 3 | 4;
type Score = 'A' | 'B' | 'C' | 'D';
const student: Record<Grade, Score> = {
1: 'A',
2: 'C',
3: 'A',
4: 'B'
}
Record는 key값과 value의 type 정의를 묶어 사용할수있음
이렇게 정의된 타입과 해당 변수에 선언된 값의 타입이 일치하지 않으면 오류가 발생한다.
Author And Source
이 문제에 관하여([TypeScript] 기본 개념 정리), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@krkorklo58/TypeScript-기본-개념-정리저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)