프론트엔드 취업준비생으로서, 타입스크립트는 사실상 '필수'라고 여겨지는 것 같다.
그렇다면 타입스크립트가 어떤 것이며, 왜 배워야하는 것일까?
(개인적으로, 필요성을 느껴야 공부가 더 잘 되는 타입이기도 해서 궁금하기도 했다.)
TypeScript란?
2012년에 마이크로소프트의 개발자이자 C#의 창시자로도 알려진 아주 유명한 덴마크 출신의 개발자 Anders Hejlsberg(앤더스 하일스버그)이 만든 언어로,
TypeScript 공식 사이트에서는 “TypeScript is JavaScript with syntax for types.”라고 설명한다.
즉, “TypeScript는 타입을 위한 구문이 있는 JavaScript”라는 의미이다.
TypeScript는 기본적으로 JavaScript이다.
쉽게 말해서, 자바스크립트의 확장판
TypeScript를 왜 쓸까?(Javascript의 한계점)
모든 프로그래밍 언어에는 타입시스템이란 게 존재하며,
TypeScript는 점진적 타입 시스템으로, 타입이 정의된 변수들에 대해서는 타입을 미리 결정하고 타입이 정의되지 않은 변수들에 대해서는 타입을 자동으로 추론하는 그런 타입 시스템이다.
(타입시스템: 언어에서 사용할 수 있는 아주 여러가지 값들을 어떤 기준으로 묶어서 타입으로 정할지 결정하고 또 코드의 타입을 언제 검사할지 그리고 어떻게 검사할지 등의 우리가 프로그래밍 언어를 사용할때 타입과 관련해서 지켜야 하는 규칙들을 모아둔 체계 => 언어의 타입 관련된 문법 체계)
JavaScript에서 발생하는 에러는 크게 문법에러, 타입에러, 기타에러(런타임에러) 3가지로 둘 수있으며,
TypeScript를 사용한다면, 타입 관련 오류와 오타를 코드 실행 전 검사를 해줌으로써 기존 JavaScript보다 에러 발생률이 감소시킬 수 있다.
타입스크립트의 특징
1. 정적 타입 검사: TypeScript에서 가장 중요한 특징은 정적 타입 검사를 지원한다는 것이다. 이를 통해 변수, 함수 매개변수, 객체 프로퍼티 등에 대한 타입을 명시할 수 있다. 컴파일 시간에 오류를 발견하고 수정할 수 있으므로 런타임 오류를 줄이고 코드의 안정성과 신뢰성을 높일 수 있다.
let num: number = 'hello'; // Error: Type 'string' is not assignable to type 'number'.
2. 클래스와 인터페이스: TypeScript는 ES6 클래스 문법을 지원하며, 인터페이스를 사용하여 코드 내에서 계약(Contract)을 정의하고 이 계약을 따르도록 강제할 수 있다. 이를 통해 객체 지향 프로그래밍 패턴과 추상화가 용이해지며, 코드 재사용성과 유지 보수성이 향상된다.
interface Person {
name: string;
age: number;
}
class Student implements Person {
name: string;
age: number;
studentId: string;
constructor(name: string, age: number, studentId: string) {
this.name = name;
this.age = age;
this.studentId = studentId;
}
}
3. 모듈 시스템: TypeScript는 모듈 시스템을 지원하여 코드를 여러 개 파일로 구성하고 재사용 가능한 모듈로 분리할 수 있다. 이렇게 함으로써 의존성 관리가 용이해지며, 큰 규모의 애플리케이션 개발에 적합하다.
4. 타입 추론 및 유연한 타입 어노테이션: TypeScript는 변수 선언 시 초기값에 따라 자동으로 타입을 추론하는 기능을 제공한다. 또한 선택적인 타입 어노테이션(annotation) 문법을 사용하여 원하는 경우 명시적으로 타입 정보를 추가할 수도 있다.
let message = 'Hello'; // Type inference - message is of type string
let count: number | undefined; // Union type - count can be a number or undefined타입스크립트의 동작원리
타입스크립트는 컴파일 결과 타입 검사를 거쳐 자바스크립트 코드로 변환되는데 이때 만약 코드에 오류가 있다면 컴파일 도중 실패하게 되므로 자바스크립트를 보다 더 안전하게 사용하는 미리 한번 코드를 검사하는 용도로 사용된다.
TypeScript 코드는 컴파일 과정에서 JavaScript 코드로 변환된다. 이 과정은 tsc (TypeScript 컴파일러)라고 하는 도구에 의해 처리된다.
- 소스코드 작성 및 저장 : .ts 확장자 파일에 TypeScript 소스코드 작성 후 저장한다.
- 컴파일 : tsc 명령어 실행 또는 IDE 내부에서 자동으로 컴파일되어 JavaScript 파일(.js) 생성된다.
- 실행 : 생성된 JavaScript 파일은 Node.js나 웹 브라우저 등에서 실행된다.
- (공통) 프로그래밍 언어의 동작 원리:
먼저 코드를 컴파일러가 AST로 변환하고 AST를 다시 바이트코드로 변환하고 이렇게 변환된 바이트코드를 컴퓨터가 실행한다.
타입스크립트 컴파일러 옵션 설정
TypeScript 컴파일러 옵션은 tsconfig.json 파일에서 설정할 수 있다.
{
"compilerOptions": {
/* Visit https://aka.ms/tsconfig to read more about this file */
/* Projects */
// "incremental": true, /* Save .tsbuildinfo files to allow for incremental compilation of projects. */
// "composite": true, /* Enable constraints that allow a TypeScript project to be used with project references. */
// "tsBuildInfoFile": "./.tsbuildinfo", /* Specify the path to .tsbuildinfo incremental compilation file. */
// "disableSourceOfProjectReferenceRedirect": true, /* Disable preferring source files instead of declaration files when referencing composite projects. */
// "disableSolutionSearching": true, /* Opt a project out of multi-project reference checking when editing. */
// "disableReferencedProjectLoad": true, /* Reduce the number of projects loaded automatically by TypeScript. */
/* Language and Environment */
"target": "es2016", /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */
// "lib": [], /* Specify a set of bundled library declaration files that describe the target runtime environment. */
// "jsx": "preserve", /* Specify what JSX code is generated. */
// "experimentalDecorators": true, /* Enable experimental support for legacy experimental decorators. */
// "emitDecoratorMetadata": true, /* Emit design-type metadata for decorated declarations in source files. */
// "jsxFactory": "", /* Specify the JSX factory function used when targeting React JSX emit, e.g. 'React.createElement' or 'h'. */
// "jsxFragmentFactory": "", /* Specify the JSX Fragment reference used for fragments when targeting React JSX emit e.g. 'React.Fragment' or 'Fragment'. */
// "jsxImportSource": "", /* Specify module specifier used to import the JSX factory functions when using 'jsx: react-jsx*'. */
// "reactNamespace": "", /* Specify the object invoked for 'createElement'. This only applies when targeting 'react' JSX emit. */
// "noLib": true, /* Disable including any library files, including the default lib.d.ts. */
// "useDefineForClassFields": true, /* Emit ECMAScript-standard-compliant class fields. */
// "moduleDetection": "auto", /* Control what method is used to detect module-format JS files. */
/* Modules */
"module": "commonjs", /* Specify what module code is generated. */
// "rootDir": "./", /* Specify the root folder within your source files. */
// "moduleResolution": "node10", /* Specify how TypeScript looks up a file from a given module specifier. */
// "baseUrl": "./", /* Specify the base directory to resolve non-relative module names. */
// "paths": {}, /* Specify a set of entries that re-map imports to additional lookup locations. */
// "rootDirs": [], /* Allow multiple folders to be treated as one when resolving modules. */
// "typeRoots": [], /* Specify multiple folders that act like './node_modules/@types'. */
// "types": [], /* Specify type package names to be included without being referenced in a source file. */
// "allowUmdGlobalAccess": true, /* Allow accessing UMD globals from modules. */
// "moduleSuffixes": [], /* List of file name suffixes to search when resolving a module. */
// "allowImportingTsExtensions": true, /* Allow imports to include TypeScript file extensions. Requires '--moduleResolution bundler' and either '--noEmit' or '--emitDeclarationOnly' to be set. */
// "resolvePackageJsonExports": true, /* Use the package.json 'exports' field when resolving package imports. */
// "resolvePackageJsonImports": true, /* Use the package.json 'imports' field when resolving imports. */
// "customConditions": [], /* Conditions to set in addition to the resolver-specific defaults when resolving imports. */
// "resolveJsonModule": true, /* Enable importing .json files. */
// "allowArbitraryExtensions": true, /* Enable importing files with any extension, provided a declaration file is present. */
// "noResolve": true, /* Disallow 'import's, 'require's or '<reference>'s from expanding the number of files TypeScript should add to a project. */
/* JavaScript Support */
// "allowJs": true, /* Allow JavaScript files to be a part of your program. Use the 'checkJS' option to get errors from these files. */
// "checkJs": true, /* Enable error reporting in type-checked JavaScript files. */
// "maxNodeModuleJsDepth": 1, /* Specify the maximum folder depth used for checking JavaScript files from 'node_modules'. Only applicable with 'allowJs'. */
/* Emit */
// "declaration": true, /* Generate .d.ts files from TypeScript and JavaScript files in your project. */
// "declarationMap": true, /* Create sourcemaps for d.ts files. */
// "emitDeclarationOnly": true, /* Only output d.ts files and not JavaScript files. */
// "sourceMap": true, /* Create source map files for emitted JavaScript files. */
// "inlineSourceMap": true, /* Include sourcemap files inside the emitted JavaScript. */
// "outFile": "./", /* Specify a file that bundles all outputs into one JavaScript file. If 'declaration' is true, also designates a file that bundles all .d.ts output. */
// "outDir": "./", /* Specify an output folder for all emitted files. */
// "removeComments": true, /* Disable emitting comments. */
// "noEmit": true, /* Disable emitting files from a compilation. */
// "importHelpers": true, /* Allow importing helper functions from tslib once per project, instead of including them per-file. */
// "importsNotUsedAsValues": "remove", /* Specify emit/checking behavior for imports that are only used for types. */
// "downlevelIteration": true, /* Emit more compliant, but verbose and less performant JavaScript for iteration. */
// "sourceRoot": "", /* Specify the root path for debuggers to find the reference source code. */
// "mapRoot": "", /* Specify the location where debugger should locate map files instead of generated locations. */
// "inlineSources": true, /* Include source code in the sourcemaps inside the emitted JavaScript. */
// "emitBOM": true, /* Emit a UTF-8 Byte Order Mark (BOM) in the beginning of output files. */
// "newLine": "crlf", /* Set the newline character for emitting files. */
// "stripInternal": true, /* Disable emitting declarations that have '@internal' in their JSDoc comments. */
// "noEmitHelpers": true, /* Disable generating custom helper functions like '__extends' in compiled output. */
// "noEmitOnError": true, /* Disable emitting files if any type checking errors are reported. */
// "preserveConstEnums": true, /* Disable erasing 'const enum' declarations in generated code. */
// "declarationDir": "./", /* Specify the output directory for generated declaration files. */
// "preserveValueImports": true, /* Preserve unused imported values in the JavaScript output that would otherwise be removed. */
/* Interop Constraints */
// "isolatedModules": true, /* Ensure that each file can be safely transpiled without relying on other imports. */
// "verbatimModuleSyntax": true, /* Do not transform or elide any imports or exports not marked as type-only, ensuring they are written in the output file's format based on the 'module' setting. */
// "allowSyntheticDefaultImports": true, /* Allow 'import x from y' when a module doesn't have a default export. */
"esModuleInterop": true, /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables 'allowSyntheticDefaultImports' for type compatibility. */
// "preserveSymlinks": true, /* Disable resolving symlinks to their realpath. This correlates to the same flag in node. */
"forceConsistentCasingInFileNames": true, /* Ensure that casing is correct in imports. */
/* Type Checking */
"strict": true, /* Enable all strict type-checking options. */
// "noImplicitAny": true, /* Enable error reporting for expressions and declarations with an implied 'any' type. */
// "strictNullChecks": true, /* When type checking, take into account 'null' and 'undefined'. */
// "strictFunctionTypes": true, /* When assigning functions, check to ensure parameters and the return values are subtype-compatible. */
// "strictBindCallApply": true, /* Check that the arguments for 'bind', 'call', and 'apply' methods match the original function. */
// "strictPropertyInitialization": true, /* Check for class properties that are declared but not set in the constructor. */
// "noImplicitThis": true, /* Enable error reporting when 'this' is given the type 'any'. */
// "useUnknownInCatchVariables": true, /* Default catch clause variables as 'unknown' instead of 'any'. */
// "alwaysStrict": true, /* Ensure 'use strict' is always emitted. */
// "noUnusedLocals": true, /* Enable error reporting when local variables aren't read. */
// "noUnusedParameters": true, /* Raise an error when a function parameter isn't read. */
// "exactOptionalPropertyTypes": true, /* Interpret optional property types as written, rather than adding 'undefined'. */
// "noImplicitReturns": true, /* Enable error reporting for codepaths that do not explicitly return in a function. */
// "noFallthroughCasesInSwitch": true, /* Enable error reporting for fallthrough cases in switch statements. */
// "noUncheckedIndexedAccess": true, /* Add 'undefined' to a type when accessed using an index. */
// "noImplicitOverride": true, /* Ensure overriding members in derived classes are marked with an override modifier. */
// "noPropertyAccessFromIndexSignature": true, /* Enforces using indexed accessors for keys declared using an indexed type. */
// "allowUnusedLabels": true, /* Disable error reporting for unused labels. */
// "allowUnreachableCode": true, /* Disable error reporting for unreachable code. */
/* Completeness */
// "skipDefaultLibCheck": true, /* Skip type checking .d.ts files that are included with TypeScript. */
"skipLibCheck": true /* Skip type checking all .d.ts files. */
}
}
- "target" 옵션은 변환된 JavaScript 버전(ES5, ES6 등)을 설정할 수 있다.
- "module" 옵션은 모듈 시스템 설정할 수 있다.(CommonJS, AMD 등)
- "strict" 옵션이 활성화되면 엄격한 타입 체크가 되어 오류 검출률이 높아진다.
- "noImplicitAny"는 변수들이 미리 정의된 타입을 가져야하는지 여부를 제어하며, 타입스크립트는 타입 정보를 가질 때 가장 효과적이기 때문에, noImplicitAny 설정을 true로 두는 것을 권장한다.
- "strictNullChecks"는 null과 undefined가 모든 타입에서 허용되는지 확인하는 설정으로 "'undefined'는 객체가 아닙니다" 같은 런타임 오류를 방지하기 위해 "strictNullChecks" 설정을 true로 두는 것이 좋다.
위 글의 관련 자료는 공식문서와 Learning TypeScript, Effective TypeScript, 타입스크립트 교과서 책, 한 입 크기로 잘라먹는 타입스크립트 강의를 참고하였다.
