타입스크립트와 React와 연동하여서 개발을 연습하고 있는중 많은 부분에서 에러가 발생하는 부분이 있었다.

tslint에서 설정을 하는데 아직 정확하게 이해는 하지 못했다.  하지만 다른사람들이 설정해놓은 값으로 하니 에러가 발생하지 않았다.

https://github.com/wmonk/create-react-app-typescript/issues/216   

많은 부분이 설정에 들어가는데 하나씩 들여다 봐야 하지만 우선 문제가 생기면 하나씩 뜯어봐야할듯 하다.


{
  "extends": ["tslint-react", "tslint-config-prettier"],
  "rules": {
    "ban": false,
    "class-name": true,
    "comment-format": [true, "check-space"],
    "curly": true,
    "eofline": false,
    "forin": true,
    "interface-name": [true, "never-prefix"],
    "jsdoc-format": true,
    "jsx-no-lambda": false,
    "jsx-no-multiline-js": false,
    "label-position": true,
    "member-ordering": [
      true,
      "public-before-private",
      "static-before-instance",
      "variables-before-functions"
    ],
    "no-any": true,
    "no-arg": true,
    "no-bitwise": true,
    "no-console": [
      true,
      "log",
      "error",
      "debug",
      "info",
      "time",
      "timeEnd",
      "trace"
    ],
    "no-construct": true,
    "no-debugger": true,
    "no-duplicate-variable": true,
    "no-empty": true,
    "no-eval": true,
    "no-shadowed-variable": true,
    "no-string-literal": true,
    "no-switch-case-fall-through": true,
    "no-trailing-whitespace": false,
    "no-unused-expression": true,
    "no-use-before-declare": true,
    "radix": true,
    "switch-default": true,

    "trailing-comma": [false],

    "triple-equals": [true, "allow-null-check"],
    "typedef": [true, "parameter", "property-declaration"],
    "variable-name": [
      true,
      "ban-keywords",
      "check-format",
      "allow-leading-underscore",
      "allow-pascal-case"
    ]
  }
}



또는 다른 설정


{
"extends": ["tslint-react"],
"rules": {
"align": [
true,
"parameters",
"arguments",
"statements"
],
"ban": false,
"class-name": true,
"comment-format": [
true,
"check-space"
],
"curly": true,
"eofline": false,
"forin": true,
"indent": [ true, "spaces" ],
"interface-name": [true, "never-prefix"],
"jsdoc-format": true,
"jsx-no-lambda": false,
"jsx-no-multiline-js": false,
"label-position": true,
"max-line-length": [ true, 120 ],
"member-ordering": [
true,
"public-before-private",
"static-before-instance",
"variables-before-functions"
],
"no-any": false,
"no-arg": true,
"no-bitwise": true,
"no-console": [
true,
"log",
"error",
"debug",
"info",
"time",
"timeEnd",
"trace"
],
"no-consecutive-blank-lines": true,
"no-construct": true,
"no-debugger": true,
"no-duplicate-variable": true,
"no-empty": true,
"no-eval": true,
"no-shadowed-variable": true,
"no-string-literal": true,
"no-switch-case-fall-through": true,
"no-trailing-whitespace": false,
"no-unused-expression": true,
"no-use-before-declare": true,
"one-line": [
true,
"check-catch",
"check-else",
"check-open-brace",
"check-whitespace"
],
"quotemark": [true, "single", "jsx-double"],
"radix": true,
"semicolon": [true, "always"],
"switch-default": true,

"trailing-comma": [false],

"triple-equals": [ true, "allow-null-check" ],
"typedef": [
true,
"parameter",
"property-declaration"
],
"typedef-whitespace": [
true,
{
"call-signature": "nospace",
"index-signature": "nospace",
"parameter": "nospace",
"property-declaration": "nospace",
"variable-declaration": "nospace"
}
],
"variable-name": [true, "ban-keywords", "check-format", "allow-leading-underscore", "allow-pascal-case"],
"whitespace": [
true,
"check-branch",
"check-decl",
"check-module",
"check-operator",
"check-separator",
"check-type",
"check-typecast"
]
}
}


리액트를 학습하던 중 The key is not sorted alphabetically 에러를 발생하였습니다.


프로젝트 안에 tslin.json 파일에 밑에와 같이 "rules" 안에 "object-literal-sort-keys"를 false로 해주면 됩니다.

{
"extends": ["tslint:recommended", "tslint-react", "tslint-config-prettier"],
"linterOptions": {
"exclude": [
"config/**/*.js",
"node_modules/**/*.ts"
]
},
"rules":
{
"object-literal-sort-keys": false <-- 이렇게 내용을 추가 시켜주면 에러메시지가 발생하지 않습니다.
}

}


https://velopert.com/3595 <-- 참고 사이트에서 내용을 공부하던중에 생겼던 에러메시지가 생겼을때 처리한 부분입니다.

더 좋은 해결책이 있다면 공유 부탁드리겠습니다.

유투브 참고

https://www.youtube.com/watch?v=KhqXUi1SF4s

StackofFlow 참고

http://stackoverflow.com/questions/30618172/how-to-send-data-back-by-popviewcontrolleranimated-for-swift


1. 자식뷰에게 프로토콜 생성을 하고 변수 delegate를 선언하여 여기에 값을 넣는다.

2. 뷰모뷰에서 delegate = self로 하고 함수를 재정의(override)를 통해서 값을 받을수 있다.


프로토콜로 값을 주고 받으면 깔끔히 해결.

지금 프로젝트를 진행하고 있어 정리를 나중에 해야겠다.


+ Recent posts