Skip to content

YoungHaKim7/my_typescript_project

BranchesTags

Repository files navigation

C#의 창시자 & TypeScript 창시자 , 앤더스 헤일즈버그 (Anders Hejlsberg

https://www.csharpstudy.com/Story/Article/2

https://dev.to/destrodevshow/typescript-and-c-both-created-by-the-same-person-named-anders-hejlsberg-42g4


타입스크립트를 공부하고 싶은 당신에게 (learn-ts.org)

TypeScript 공식 문서 Doc

https://www.typescriptlang.org/docs/

Cheatsheets for experienced React developers getting started with TypeScript

https://github.com/typescript-cheatsheets/react

강제로 자동정렬 해 주기

npx prettier --write \main.ts

tsconfig 기본 세팅 루틴(tsc --init)

tsc --init
  • watch
tsc -w

Nodejs 설치

  • Typescript를 사용하기 전에, 먼저 Node.js를 설치해야 합니다. LTS(Long Term Support) 버전을 설치하세요.

https://nodejs.org/

TypeScript 설치

Node.js를 설치한 후, 다음 명령어로 Typescript를 설치합니다.

npm install typescript --save-dev

프로젝트 초기화

  • Typescript 프로젝트를 초기화하려면 다음 명령어를 실행하세요. 이 명령어는 tsconfig.json 파일을 생성합니다.
npx tsc --init
  • tsconfig.json 파일을 열고 다음 설정을 추가하세요. 이 설정은 "src" 폴더에 있는 모든 TypeScript 파일을 컴파일하고, 결과를 "build" 폴더에 저장합니다.
{
  "include": ["src"],
  "compilerOptions": {
    "outDir": "./build"
  }
}

TypeScript 컴파일

  • Typescript 컴파일러를 사용하려면 다음 명령어를 실행하세요.
npx tsc
  • Typescript 파일의 변경사항을 실시간으로 감지하고 컴파일하려면 다음 명령어를 실행하세요.
npx tsc --watch

vim/neovim LSP seting

Install & In your vim/neovim, run command:

// coc install
:CocInstall coc-tsserver


// TSInstall LspInstall
:TSInstall typescript

:LspInstall typescript-language-server

https://github.com/neoclide/coc-tsserver


  • vim setting

https://github.com/pangloss/vim-javascript

my_typescript_project

Installing

  • For the latest stable version:
npm install -g typescript

  • For our nightly builds:
npm install -g typescript@next

Helix

helix Lsp setting

https://github.com/YoungHaKim7/rust_vim_setting/tree/main/helix_settings

helix 세팅할 때 주의 할점 Q&A

https://github.com/helix-editor/helix/wiki/FAQ

TypeScript 세팅

https://ar.al/2022/11/14/installing-helix-editor-language-servers/#code

#!/usr/bin/env bash

BINARY_HOME="${HOME}/.local/bin"
DATA_HOME="${XDG_DATA_HOME:-$HOME/.local/share}"

echo "Installing Language Servers for Helix Editor:"

# Work in a throwaway temporary directory so as not to pollute the file system.
temporaryDirectory="/tmp/helix-editor-language-server-installer"
mkdir -p "${temporaryDirectory}"
pushd "${temporaryDirectory}"

# Bash
echo "  • Bash (bash-language-server)"
npm i -g bash-language-server

# HTML, JSON, JSON schema
echo "  • HTML, JSON, and JSON schema (vscode-langservers-extracted)"
npm i -g vscode-langservers-extracted

# JavaScript (via TypeScript)
echo "  • JavaScript (typescript, typescript-language-server)"
npm install -g typescript typescript-language-server

# Markdown (via ltex-ls. Note: this has excellent features like
# spelling and grammar check but is a ~269MB download).
echo "  • Markdown (ltex-ls)"
ltexLsVersion=15.2.0
ltexLsBinaryPath="${BINARY_HOME}/ltex-ls"
ltexLsBaseFileName="ltex-ls-${ltexLsVersion}"
ltexLsFileNameWithPlatform="${ltexLsBaseFileName}-linux-x64"
ltexLsAppDirectory="${DATA_HOME}/${ltexLsBaseFileName}"
rm "${ltexLsBinaryPath}"
rm -rf "${ltexLsAppDirectory}"
wget "https://github.com/valentjn/ltex-ls/releases/download/${ltexLsVersion}/${ltexLsFileNameWithPlatform}.tar.gz"
gunzip "${ltexLsFileNameWithPlatform}.tar.gz"
tar xf "${ltexLsFileNameWithPlatform}.tar"
mv "${ltexLsBaseFileName}" "${DATA_HOME}"
ln -s "${ltexLsAppDirectory}/bin/ltex-ls" "${ltexLsBinaryPath}" 

# TOML
cargo install taplo-cli --locked --features lsp

# Clean up.
popd
rm -rf "${temporaryDirectory}"

echo "Done."

Hello World TypeScript

main.ts

class Greeter {
    greeting: string;

    constructor(message: string) {
        this.greeting = message;
    }
    greet(): string {
        return this.greeting;
    }
};

let greeter = new Greeter("Hello, world ! TypeScript");
console.log(greeter.greet());

install & typescript compile

PS D:\hello_typescript> npm install -g typescript

added 1 package, and audited 2 packages in 3s

found 0 vulnerabilities
PS D:\hello_typescript> ls

    Directory: D:\hello_typescript

Mode                 LastWriteTime         Length Name
----                 -------------         ------ ----
-a---        2023-02-03 오후 12:35             25 main.ts
-a---        2023-02-03 오후 12:35             25 README.md


PS D:\hello_typescript> tsc main.ts

PS D:\hello_typescript> ls

    Directory: D:\hello_typescript

Mode                 LastWriteTime         Length Name

-a---        2023-02-03 오후 12:48            321 main.js
-a---        2023-02-03 오후 12:48            274 main.ts
-a---        2023-02-03 오후 12:46             25 README.md

PS D:\hello_typescript> node main.js

Hello, world ! TypeScript

TypeScript 공식 문서 모음 & Tutorial 자료 모음

VS Code tips — Parameter type inlay hints

https://youtu.be/E71eT_bxnAI

  • settings.json (VSCode)
{
  "workbench.colorCustomizations": {
    "editorError.foreground": "#3f1010", // squiggly line
    "editorError.border": "#ffffff", // additional border under squiggly line
    "editorInlayHint.background": "#e85a5a98",
    "editorInlayHint.typeBackground": "#442b7a",

    // Overrides for specific kinds of inlay hints
    "editorInlayHint.typeForeground": "#fdb6fdf0",
    "editorInlayHint.parameterForeground": "#fdb6fdf0",
    "editorInlayHint": true
  },
  // JavaScript & TypeScript Inlayhint
  "javascript.inlayHints.enumMemberValues.enabled": true,
  "javascript.inlayHints.functionLikeReturnTypes.enabled": true,
  "javascript.inlayHints.parameterNames.enabled": "all",
  "javascript.inlayHints.parameterTypes.enabled": true,
  "javascript.inlayHints.propertyDeclarationTypes.enabled": true,
  "javascript.inlayHints.variableTypes.enabled": true, // recently
  "typescript.inlayHints.enumMemberValues.enabled": true,
  "typescript.inlayHints.functionLikeReturnTypes.enabled": true,
  "typescript.inlayHints.parameterNames.enabled": "all",
  "typescript.inlayHints.parameterTypes.enabled": true,
  "typescript.inlayHints.propertyDeclarationTypes.enabled": true,
  "typescript.inlayHints.variableTypes.enabled": true,
  // ~~~~~~~~~~~~~~

  // auto fmt & format
  "editor.formatOnSave": true,
  "editor.formatOnPaste": true,
  "editor.formatOnType": true
}

About

My Youtube Channel - GlobalYoung https://www.youtube.com/@GlobalYoung7

Topics

typescript

Resources

Readme
Activity

Stars

0 stars

Watchers

2 watching

Forks

0 forks
Report repository

Releases

No releases published

Packages

No packages published

Languages